<template>
	<div>
		<div class="outDiv">
			<scroller lock-x>
				<div>
					<div class="mainContent">
						<div class="topShowArea">
							<!-- <Header contentTitle="主页"></Header> -->
							<div class="topsdiv">
								<span class="topsp" @click="changeUser">切换用户</span>
								<h2 class="toph2">主页</h2>
							</div>
							<div class="user">
								<h2>欢迎</h2>
								<p>{{teacherSchool}}</p>
								<p>{{fromObj.name}} {{teachtyee}}</p>
							</div>
						</div>
						<div class="sxService">
							<div class="title" @click="commonJs.gosto('/teachers/advertisement')">
								<span>升学服务</span>
								<img src="~/static/images/turn_more.png">
							</div>
							<div class="describe">下列“志愿填报”服务为试用版（陕西省数据示例），正式版将于6月15日左右上线。</div>
							<div class="image_show">
								<div class="item" @click="tanTast('zytb', 'sx0010')">
									<img src="~/static/images/home_icon_zhiyuan.png">
								</div>
								<div class="item" @click="tanTast('sycp', 'sx0005')">
									<img src="~/static/images/home_icon_shengya.png">
								</div>
								<div class="item" @click="tanTast('xkxk', 'sx0020')">
									<img src="~/static/images/home_icon_xuanke.png">
								</div>
							</div>
							<div class="summerAct">
								<div class="summerItem">
									<img src="~/static/images/summer.png">
								</div>
								<div class="summerItem">
									<img src="~/static/images/buyClass.png">
								</div>
							</div>
						</div>
						<div class="discount">
							<div class="title">优惠券</div>
							<div class="btn" @click="gotaos">
								<img class="imgIcon" src="~/static/images/home_icon_gift.png" alt>
								<span>活动礼包</span>
							</div>
						</div>
						<div class="operation" @click="commonJs.gosto('/userCenter/users')">
							<div class="userCenter">
								<img src="~/static/images/home_icon_uesr.png" alt="">
								<span>个人中心</span>
							</div>
							<p class="wechat">绑定微信，免登录</p>
						</div>
					</div>
					<div style="width: 100%;height: 10vh;"></div>
				</div>
			</scroller>
		</div>
		<div v-transfer-dom>
			<popup v-model="show5" :hide-on-blur="true" @on-hide="pwdHide">
				<div class="mimaSuoWrap popup2">
					<div class="mima1">
						<b class="b1">输入认证码</b>
						<b class="b2">请输入认证码，以验证身份</b>
					</div>
					<div class="mima2">
						<div class="mimakuang flex-h">
							<span class="flex1 sp1">{{aa}}</span>
							<span class="flex1 sp1">{{bb}}</span>
							<span class="flex1 sp1">{{cc}}</span>
							<span class="flex1 sp1 sp4">{{dd}}</span>
						</div>
					</div>
					<div class="newMimaBox">
						<div class="flex-h botBox">
							<span class="sp1 flex1" @click="clickScore(1)">1</span>
							<span class="sp1 flex1" @click="clickScore(2)">2</span>
							<span class="sp2 flex1" @click="clickScore(3)">3</span>
						</div>
						<div class="flex-h botBox">
							<span class="sp1 flex1" @click="clickScore(4)">4</span>
							<span class="sp1 flex1" @click="clickScore(5)">5</span>
							<span class="sp2 flex1" @click="clickScore(6)">6</span>
						</div>
						<div class="flex-h botBox">
							<span class="sp1 flex1" @click="clickScore(7)">7</span>
							<span class="sp1 flex1" @click="clickScore(8)">8</span>
							<span class="sp2 flex1" @click="clickScore(9)">9</span>
						</div>
						<div class="flex-h botBox">
							<span class="sp3 spbg flex1"></span>
							<span class="sp3 flex1" @click="clickScore(0)">0</span>
							<span class="spbg flex1" @click="clearScore(0)">X</span>
						</div>
					</div>
				</div>
			</popup>
		</div>
	</div>
</template>

<script>
	import {
		TransferDom,
		Popup
	} from "vux";
	import Header from "~/components/Header_transparent";
	import axios3 from "~/plugins/axios3";
	import axios2 from "~/plugins/axios2";
	import ls from "store2";
	export default {
		directives: {
			TransferDom
		},
		components: {
			Header,
			Popup
		},
		data() {
			return {
				jumpUrl:null,
				gourl: '',
				show5: false,
				numData: [1, 2, 3, 4, 5, 6, 7, 8, 9],
				fromObj: {},
				count: 0,
				aa: "",
				bb: "",
				cc: "",
				dd: "",
				uids: "1121670685743186688",
				teacherSchool: "",
				teachtyee: "老师",
				teaCode: '', // 认证码
				chooseType: "",
				audit: null, // 是否审核 1 --> 是   0 --> 否
				productCode: '', // 商品编号：  sx0005 --> 生涯测评   sx0010 --> 志愿填报   sx0020 --> 选课选科   sx0040 --> 概率查询(暂无使用)
			};
		},
		created() {

// http://192.168.8.202:8000/wx-yxk/#/chooseIdentity?type=users
			this.goShowMallUrl()
		},
		destroyed() {
			this.$vux.loading.hide()
		},
		beforeDestroy() {
			this.$vux.loading.hide()
		},
		mounted() {
			this.fromObj = ls.get("userData");
			if (this.fromObj) {
				setTimeout(() => {
					this.teachGetSchool();
				}, 20);
			}


		},
		methods: {
	
			changeUser(){
				let jumpUrls = ls.get('jumpsUrl')
				if(jumpUrls){
					let url = process.env.workUrl+'/wx-yxk/#/chooseIdentity?type=users'
					window.location.replace(url)
				}else{
					this.commonJs.gosto('tealogin')
				}
				
				
			},
			goShowMallUrl() {
				let abc = window.location.href;
				console.log('abc', abc)
				this.jumpUrl = decodeURIComponent(this.commonJs.GetUrlParam("yxk_return_url"))
				if (this.jumpUrl) {
					ls.set('jumpsUrl',this.jumpUrl)
					let datas = this.commonJs.GetUrlParam("yxk_userData")
					let usersData = JSON.parse(decodeURIComponent(datas))
					ls.set('userData', usersData)
					ls.set('userType', usersData.userType)
					ls.set('tokens', usersData.accessToken)

				} else {
					this.commonJs.gologins()
				}


			},
			gotaos() {

				if (this.audit == 1) {
					this.commonJs.gosto("/activity");
				} else {
					this.$vux.toast.text(
						"您的账号暂未通过实名认证，如需帮助请联系客服 027-88161985"
					);
				}
			},

			clearScore() {
				if (this.count < 1) {
					this.count = 0;
					return false;
				}
				this.count -= 1;
				console.log("clras", this.count);
				switch (this.count) {
					case 0:
						this.aa = "";
						break;

					case 1:
						this.bb = "";
						break;

					case 2:
						this.cc = "";
						break;
					case 3:
						this.dd = "";
						break;
					default:
						break;
				}
			},
			clickScore(num) {
				if (this.count >= 4) {
					this.count = 4;
				} else {
					this.count += 1;
					console.log("clickScore", this.count);
					switch (this.count) {
						case 1:
							this.aa = num;
							break;

						case 2:
							this.bb = num;
							break;

						case 3:
							this.cc = num;
							break;
						case 4:
							this.dd = num;
							setTimeout(() => {
								this.teachYz();
								// alert('我要调接口了')
							}, 10);

							break;
						default:
							break;
					}
				}
			},
			teachYz() {
				this.$vux.loading.show({
					text: "正在认证"
				});
				this.teaCode =
					String(this.aa) + String(this.bb) + String(this.cc) + String(this.dd);
				let url = window.location.href;

				axios3.post("/tp_teacher_code/record", {
					web_location: url,
					school_name: this.teacherSchool,
					telephone: this.fromObj.account,
					code: this.teaCode,
					service_type: this.chooseType
				}, true).then(res => {
					if (res.code == "200") {
						this.$vux.toast.text(res.message);
						this.aa = "";
						this.bb = "";
						this.cc = "";
						this.dd = "";
						this.count = 0;
						this.show5 = false;
						this.$vux.loading.hide();
						this.getOrNewCode();

					}
					if (res.code == "400") {
						this.$vux.toast.text("认证码错误");
						this.$vux.loading.hide();
					}
				}).catch(error => {
					this.$vux.toast.text(error.response.data.message);
					this.$vux.loading.hide();
				});
			},
			teachGetSchool() {
				this.$vux.loading.show({
					text: "正在加载"
				});
				axios2.post("/thirdParty/user/getTeacherUserInfoById", {
						uid: this.fromObj.userVoId
					},
					true
				).then(res => {
					if (res.code == "0") {
						let areas = res.data.area;
						let areaArr = areas.split(",");

						this.teacherArea = areaArr[0];
						this.audit = res.data.audit;
						this.teacherSchool = res.data.school;
						this.teachtyee = res.data.userType;
						ls.set("userArea", this.teacherArea);
						this.$vux.loading.hide();
						// this.$vux.toast.text(res.message)
					}
				}).catch(error => {
					this.$vux.toast.text(error);
					this.$vux.loading.hide();
				});
			},
			getOrNewCode() {
				let ure = window.location.href;
				let urls = encodeURIComponent(ure)
				axios3.post("/tp_teacher_code/coupons/valid", {
					sx_uid: this.fromObj.userVoId,
					product_code: this.productCode,
					code: this.teaCode,
					telephone: this.fromObj.account
				}).then(res => {
					if (this.chooseType == "zytb") {
						window.location.href = process.env.workUrl + '/h5-stu-wx/#/volunteer/indexs?tea_return_url=' + urls + '&tea_userData=' + encodeURIComponent(JSON.stringify(ls.get('userData')));
					} else if (this.chooseType == "sycp") {
						window.location.href = process.env.workUrl + '/h5-stu-wx/#/evaluation/ad?tea_return_url=' + urls + '&tea_userData=' + encodeURIComponent(JSON.stringify(ls.get('userData')));
					} else {
						window.location.href = process.env.workUrl + '/h5-stu-wx/#/chooseCourse/selectCouerse?tea_return_url=' + urls + '&tea_userData=' + encodeURIComponent(JSON.stringify(ls.get('userData')));
					}
				}).catch(error => {
					this.$vux.toast.text(error);
					this.$vux.toast.hide();
				})
			},
			tanTast(type, code) {
				this.show5 = true;
				this.chooseType = type;
				this.productCode = code;
			},
			pwdHide() {
				this.show5 = false;
				this.aa = "";
				this.bb = "";
				this.cc = "";
				this.dd = "";
				this.count = 0;
			}
		}
	};
</script>

<style lang="less" scoped>
	.mimaSuoWrap {
		// padding-bottom:15px;
		height: 10rem;
		background: #fff;
		position: relative;

		.mima1 {
			width: 100%;
			height: 1.2rem;
			padding: 0.1rem 0;
			box-sizing: border-box;
			border-bottom: 1px solid #a0a0a0;

			b {
				display: block;
				height: 0.5rem;
				text-align: center;
				line-height: 0.5rem;
			}

			.b1 {
				font-size: 0.28rem;
				color: #1b1924;
			}

			.b2 {
				color: #a0a0a0;
				font-size: 0.22rem;
			}
		}

		.mima2 {
			width: 100%;
			height: auto;
			overflow: hidden;

			.mimakuang {
				width: 4rem;
				height: 1rem;
				border-radius: 0.05rem;
				border: 1px solid #949494;
				margin: 0.5rem auto;

				.sp1 {
					width: 1rem;
					height: 1rem;
					border-right: 1px solid #eeeeee;
					box-sizing: border-box;
					font-size: 0.3rem;
					line-height: 1rem;
					font-weight: bold;
					text-align: center;
				}

				.sp4 {
					border-right: none;
				}
			}
		}

		.newMimaBox {
			width: 100%;
			height: 4.8rem;
			position: absolute;
			left: 0;
			bottom: 0;
			border-top: 1px solid #ededed;

			.botBox {
				width: 7.5rem;
				height: 1.2rem;
				// flex-wrap: wrap;

				span {
					width: 2.5rem;
					height: 1.2rem;
					box-sizing: border-box;
					font-size: 0.4rem;
					text-align: center;
					line-height: 1.2rem;
					color: #5c606f;
				}

				.sp1 {
					border-right: 1px solid #ededed;
					border-bottom: 1px solid #ededed;
				}

				.sp2 {
					border-bottom: 1px solid #ededed;
				}

				.sp3 {
					border-right: 1px solid #ededed;
				}

				.spbg {
					background: #f6f6f6;
				}

				span:hover {
					opacity: 0.6;
				}
			}
		}
	}

	.outDiv {
		width: 100%;
		height: 100vh;
		background: #fff;

		.mainContent {
			padding: 0;

			.topShowArea {
				width: 100%;
				height: 4.08rem;
				background: url("~/static/images/home_pic_bg.png") no-repeat;
				background-size: 100% 100%;

				.topsdiv {
					height: 0.88rem;
					line-height: 0.88rem;
					position: relative;
					padding: 0 0.3rem;
					box-sizing: border-box;

					.topsp {
						text-align: left;
						font-size: 0.26rem;
						color: #fff;
					}

					.toph2 {
						position: absolute;
						width: 3.5rem;
						height: 0.88rem;
						text-align: center;
						line-height: 0.88rem;
						left: 2rem;
						top: 0;
						font-size: 0.4rem;
						color: #222;
						font-weight: bold;
						color: #fff;
					}
				}

				.user {
					padding: 0 0.32rem;
					color: #fff;
					letter-spacing: 0.05rem;

					h2 {
						margin-top: 0.48rem;
						margin-bottom: 0.08rem;
						font-size: 0.5rem;
						font-weight: bold;
					}

					p {
						font-size: 0.28rem;
						font-weight: bold;
					}
				}
			}

			.sxService {
				margin-top: 0.52rem;
				padding: 0 0.34rem;

				.title {
					color: #222;
					margin-bottom: 0.24rem;
					line-height: 0.56rem;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					span {
						font-size: 0.4rem;
						font-weight: bold;
						margin-right: 0.08rem;
					}

					img {
						width: 0.4rem;
						height: 0.4rem;
					}
				}

				.describe {
					margin-bottom: 0.33rem;
					color: #999;
					font-size: 0.26rem;
					font-weight: 400;
					line-height: 0.44rem;
				}

				.image_show {
					display: flex;
					justify-content: space-between;
					margin-bottom: 0.24rem;

					.item {
						width: 2.12rem;
						height: 2.24rem;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.summerAct {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.summerItem {
						width: 3.31rem;
						height: 1.6rem;

						img {
							width: 100%;
							height: 100%;
						}

					}

				}
			}

			.discount {
				margin-top: 0.52rem;
				margin-bottom: 0.6rem;
				padding: 0 0.32rem;

				.title {
					color: #222;
					font-size: 0.4rem;
					font-weight: bold;
					margin-bottom: 0.32rem;
					line-height: 0.56rem;
				}

				.btn {
					width: 100%;
					height: 1.12rem;
					border-radius: 0.1rem;
					box-shadow: 0 2px 10px 0 rgba(153, 153, 153, 0.2);
					display: flex;
					justify-content: center;
					align-items: center;

					.imgIcon {
						width: 0.56rem;
						height: 0.56rem;
					}

					span {
						font-size: 0.3rem;
						color: #222;
						font-weight: bold;
						margin-left: 0.3rem;
						letter-spacing: 0.02rem;
					}
				}
			}

			.operation {
				width: 6.86rem;
				height: 1.2rem;
				background: #fff;
				box-shadow: 0 0.02rem 0.10rem 0 rgba(153, 153, 153, 0.2);
				border-radius: 0.1rem;
				padding: 0.28rem 0.32rem 0.28rem 0.34rem;
				margin: 0 0.32rem;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.userCenter {
					display: flex;
					justify-content: space-between;
					align-items: center;

					img {
						width: 0.64rem;
						height: 0.64rem;
					}

					span {
						color: #222;
						font-size: 0.3rem;
						font-weight: bold;
						line-height: 0.42rem;
						margin-left: 0.24rem;
					}
				}

				.wechat {
					color: #409EFF;
					font-size: 0.26rem;
					line-height: 0.37rem;
				}

			}

		}
	}
</style>
